import React, { Component, PropTypes } from 'react';
import axios from 'axios';

import { findDOMNode } from 'react-dom';
import { connect } from 'react-redux';
import store from '../../store';

class NewPreview extends Component{

    closeFrame(e){
        e.stopPropagation();
        store.dispatch({
            type: 'NEW_PREVIEW',
            newPreview: false
        });
        $('.backcover').hide();
    }

    getTime(){
        var time = new Date();
        time = time.toISOString();
        time = time.substring(0,10);
        return time;
    }

    addMenu(name){
        var _state = {
            id: '0',
            tel: window.ACCOUNT,
            firstnav: $('#folder-list').find('.active .folder-child').html(),
            secondnav: name,
            time: this.getTime(),
            content: ''
        }

        store.dispatch({
            type: 'GET_PREVIEW',
            previewList: [...store.getState().previewReducer.previewList, _state]
        });

        this.savePreview(_state);

    }

    savePreview(params){
        axios.get('/savePreview', {
            params: params
        })
        .then((response) => {
            
        })
        .catch((error) => {
            console.log('系统出错！')
        })
    }

    newPreview(){
        var { previewList } = this.props;
        var previewName = $('#new-preview-input').val().replace(/\s/g, "");
        var hasPreview = previewList.find((value, index, arr) => {
            return (previewName === value.secondnav) ? true : false;
        });

        if (!previewName || previewName ===''){
            store.dispatch({
                type: 'ERROR_TIP',
                errorTip: '文件名不能为空！'
            });
            $('#new-preview-error').show();
            return false;
        }

        if(hasPreview){
            store.dispatch({
                type: 'ERROR_TIP',
                errorTip: '文件不能重名！'
            });
            $('#new-preview-error').show();
            return false;
        }

        store.dispatch({
            type: 'NEW_PREVIEW',
            newPreview: false
        });
        $('.backcover').hide();

        this.addMenu(previewName);

    }

    clearnError(){
        $('#new-preview-error').hide();
    }

    render(){
        var { isNew, errorTip } = this.props;
        var classs = 'new-container hide';
        if ( isNew) classs = 'new-container'

        return (
            <section id="new-preview" className={ classs }>
                <div className="new-title">
                    新建文件
                    <i className="icon-remove" onClick={this.closeFrame.bind(this)}></i>
                </div>
                <div><input id="new-preview-input" type="text" placeholder="请输入文件名字" onFocus={this.clearnError.bind(this)}/></div>
                <div id="new-preview-error" className="error">{errorTip}</div>
                <div>
                    <button id="new-preview-btn" className="new-btn" onClick={this.newPreview.bind(this)}>新建</button>
                </div>
            </section>
        )
    }

}

const mapStateToProps  = (state) => {
    return {
        previewList: state.previewReducer.previewList,
        isNew: state.previewReducer.newPreview,
        errorTip: state.previewReducer.errorTip
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NewPreview);